<script lang="ts" setup>
import type { Information01ComponentMeta } from '@/definitions/type'
import { useCompStyleRender } from '@/hooks/useCompStyleRender'
import { usePrefix } from '@/hooks/usePrefix'
import { useDesignStore } from '@/stores'
import { computed } from 'vue'
import './RenderInformation01.less'

defineOptions({
  name: 'RenderInformation01',
})
const props = defineProps<{
  render: Information01ComponentMeta
}>()
const designStore = useDesignStore()
const platform = computed(() => designStore.config.platform)
const { prefix } = usePrefix()
const { style, wraperCls } = useCompStyleRender(props)
</script>

<template>
  <div :style="style" :class="[prefix('wraper'), prefix(wraperCls), prefix(platform)]">
    <div v-if="platform === 'mobile'" :class="prefix('main')">
      <div :class="prefix('list')">
        <!-- item for loop -->
        <a v-for="item of render.config.news" :key="item.id" target="_blank" :href="item.url" :class="prefix('item')">
          <img :src="item.pic" :width="100" :height="75" :class="prefix('pic')">
          <div :class="prefix('info')">
            <div :class="prefix('title')">{{ item.title }}</div>
            <div :class="prefix('time')">{{ item.time }}</div>
          </div>
        </a>
      </div>
      <a v-if="render.config.buttonUrl" :class="prefix('btn')" target="_blank" :href="render.config.buttonUrl">{{ render.config.buttonText }}</a>
    </div>
    <div v-else-if="platform === 'pc'" :class="prefix('main')">
      <!-- render-item for loop -->
      <a v-for="(item, index) in render.config.news" :key="item.id" :href="item.url" target="_blank" :class="[prefix('render-item'), index === 0 ? prefix('render-item-active') : '', `${render.id!}_${item.id}`]">
        <img :src="item.pic" :width="580" :height="326" :class="prefix('pic')">
        <div :class="prefix('info')">
          <div :class="prefix('title')">{{ item.title }}</div>
          <div :class="prefix('desc')">{{ item.desc }}</div>
          <div :class="prefix('target')">
            <span :class="prefix('target-text')">{{ item.time ? item.time.split('-').join('.') : '--' }}</span>
            <span :class="prefix('target-cursor')">
              <i class="iconfont icon-moban1_jiantou_xiangyou" :class="[prefix('target-icon')]" />
            </span>
          </div>
        </div>
      </a>
      <div :class="prefix('list')">
        <!-- item for loop -->
        <div v-for="(item, index) in render.config.news" :key="item.id" :class="[prefix('item'), index === 0 ? prefix('item-active') : '']" :data-news="`${render.id!}_${item.id}`">
          <div :class="prefix('left')">
            <div :class="prefix('date')">
              {{ item.time ? item.time.split('-').pop() : '--' }}
            </div>
            <div :class="prefix('fulldate')">
              {{ item.time ? item.time.split('-').slice(0, 2).join('.') : '--' }}
            </div>
          </div>
          <div :class="prefix('right')">
            {{ item.title }}
          </div>
        </div>
      </div>
      <a v-if="render.config.buttonUrl" :class="prefix('btn')" target="_blank" :href="render.config.buttonUrl">{{ render.config.buttonText }}</a>
    </div>
  </div>
</template>
